<template>
  <view class="myAppointmentsInfo-page">
    <NavBar title="管理就诊人" />

    <view class="list">
      <view
        class="list-item"
        v-for="item in userState.patientList"
        :key="item.cmPatientId"
        @tap="handleSelectPatient(item)"
      >
        <view class="name"> {{ item.patientName }} </view>

        <view class="cardNo"> {{ item.idCard }} </view>

        <view class="line"></view>

        <view class="bottom">
          <view class="select" @tap.stop="handleSetDefaultPatient(item)">
            <image
              class="icon"
              :src="item.isDefault === '1' ? Check : CheckNo"
            />
            <text class="text">{{
              item.isDefault === "1" ? "已设为默认" : "设为默认"
            }}</text>
          </view>

          <view class="btns">
            <text class="btn" @tap.stop="handleToPatientsInfoDelete(item)"
              >删除</text
            >
            <text class="btn" @tap.stop="handleToPatientsInfoEdit(item)"
              >修改</text
            >
          </view>
        </view>

        <image
          class="select_icon"
          :src="Select"
          v-if="userState.currentPatient?.cmPatientId === item.cmPatientId"
        />
      </view>
    </view>

    <view class="footer">
      <view class="btn" @tap="handleToPatientsInfo">
        <text class="icon">+</text>
        <text class="text">新增就诊人</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import NavBar from "../../components/NavBar.vue";
import Taro, { useReady } from "@tarojs/taro";
import CheckNo from "../../assets/images/login_check_no.png";
import Check from "../../assets/images/login_check.png";
import Select from "../../assets/images/select.png";
import { deletePatient, setDefaultPatient } from "../../api/user.api";
import { PatientRes } from "../../../types/user.type";
import { useUserStore } from "../../stores/userStore";
import { safeNavigateBack } from "../../utils/navigation.util";

const userState = useUserStore();

const handleSetDefaultPatient = async (item: PatientRes) => {
  const res = await setDefaultPatient({
    cmPatientId: item.cmPatientId,
  });

  if (res.code === "200") {
    userState.getPatientListApi();
  }
};

const handleSelectPatient = (item: PatientRes) => {
  userState.currentPatient = item;

  // 返回上一页
  safeNavigateBack();
};

// 删除就诊人
const handleToPatientsInfoDelete = (item: PatientRes) => {
  Taro.showModal({
    title: "提示",
    content: "确定删除该就诊人吗？",
    success: async (res) => {
      if (res.confirm) {
        deletePatient({
          cmPatientId: item.cmPatientId,
        }).then((res) => {
          if (res.code === "200") {
            userState.getPatientListApi();
          }
        });
      }
    },
  });
};

// 编辑就诊人
const handleToPatientsInfoEdit = (item: PatientRes) => {
  Taro.navigateTo({
    url: "/pages/patientsInfo/patientsInfo?id=" + item.cmPatientId,
  });
};

// 新增就诊人
const handleToPatientsInfo = () => {
  Taro.navigateTo({
    url: "/pages/patientsInfo/patientsInfo",
  });
};

useReady(() => {
  userState.getPatientListApi();
});
</script>

<style lang="scss">
.myAppointmentsInfo-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #ffffff;

  .logo-container {
    flex-shrink: 0;
    width: 100%;

    .logo-container-inner {
      padding-top: 11px;
      padding-left: 16px;

      .close {
        width: 22px;
        height: 22px;
      }
    }
  }

  .list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    padding: 10px 16px;
    background: #f7f8fc;
    overflow-y: auto;

    .list-item {
      display: flex;
      flex-direction: column;
      width: 100%;
      padding-top: 15px;
      padding-left: 16px;
      padding-bottom: 13px;
      padding-right: 16px;
      background: #ffffff;
      border-radius: 12px;
      position: relative;

      .name {
        font-weight: 400;
        font-size: 15px;
        color: rgba(0, 0, 0, 0.9);
        font-style: normal;
      }

      .cardNo {
        margin-top: 4px;
        font-weight: 400;
        font-size: 13px;
        color: rgba(0, 0, 0, 0.9);
        font-style: normal;
      }

      .line {
        width: 100%;
        height: 1px;
        margin-top: 13px;
        margin-bottom: 6px;
        background: #f8f8f8;
      }

      .bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .select {
          display: flex;
          align-items: center;

          .icon {
            width: 22px;
            height: 22px;
          }

          .text {
            font-weight: 400;
            font-size: 12px;
            color: #16ada4;
          }
        }

        .btns {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 30px;

          .btn {
            font-weight: 400;
            font-size: 12px;
            color: rgba(0, 0, 0, 0.4);
          }
        }
      }

      .select_icon {
        width: 16px;
        height: 16px;
        position: absolute;
        top: 42px;
        right: 16px;
        z-index: 10;
      }
    }
  }

  .footer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 30px 16px;
    background: #f7f8fc;

    .btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      width: 100%;
      height: 45px;
      background: #16ada4;
      border-radius: 30px 30px 30px 30px;
      font-weight: 500;
      font-size: 16px;
      color: #ffffff;

      .icon {
        font-size: 20px;
      }
    }
  }
}
</style>
